/* The main wrapper for positioning arrows */
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.intro {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    color: rgb(213, 238, 102);
}

.sep-1 {
    /* height: 2px; */
    width: 10%;
    align-items: center;
    /* border: 1px solid red; */
    /* display: flex; */
    align-content: center;

}

.sep-2 {
    flex-grow: 1;
    /* height: 2px; */
    align-items: center;
    /* border: 1px solid red; */
    /* display: flex; */
    align-content: center;

}

.hr {
    background-color: #9d9d9ca2;
    height: 1px;
}

.heading>h2 {
    /* font-family: "Josefin Sans", sans-serif; */
    font-family: "Doto", sans-serif;
    font-weight: bolder;
    /* border: 1px solid red; */
}

.gallery {
    width: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    place-content: center;
    justify-content: flex-start;
    margin-inline: auto;
    /* min-height: 100vh; */
}

.intro {
    background-color: #1a1a1a;

}

/* 1. Base transition for smooth fading */
.carousel-wrapper {
    transition: all 0.4s ease-in-out;
    opacity: 0.9; /* Default state */
}

/* 2. When hovering the MAIN CONTAINER, dim ALL items */
/* .gallery:hover .gallery-item {
    opacity: 0.2; 
    filter: blur(2px);
} */

/* 3. The EXCEPTION: Keep the specific item you are hovering bright */
.gallery .carousel-wrapper:not(:hover) {
    opacity: 0.2;
    filter: blur(0);
    transform: scale(1.02); /* Optional: Slight zoom to emphasize focus */
}

/* 2. When the container has the 'active' class, show the wrapper */
.slideshow-container.active .carousel-wrapper {
    display: block;
    animation: fadeEffect 0.5s;
    /* Reuse your existing fade or standard fade */
}

/* 3. The Custom Green Circle Cursor */
body {
    cursor: pointer;
    /* Fallback */
    /* SVG Data URI for a semi-transparent green circle */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill="rgb(213, 238, 102,0.5)" stroke="green" stroke-width="0"/></svg>') 16 16, auto;

    transition: color 0.3s ease;
    /* padding: 10px; */
    /* border-radius: 10px; */
}



.carousel-wrapper:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill="rgb(255, 255, 255,0.6)" stroke="green" stroke-width="0"/></svg>') 16 16, auto;
    transition: color 0.3s ease;
    
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.site-footer-gal {
	position: relative;
	/* margin-top: -50px; */
    font-family: "Josefin Sans", sans-serif;
    text-transform: uppercase;
	/* padding: 20px 0 30px 0; */
	color: #cfcfcf;
	/* soft dark grey – not harsh */
	text-align: center;
	font-size: 15px;
	/* slightly small = professional */
	letter-spacing: 0.4px;
	opacity: 0.9;
	width: 100%;
	margin: auto;
	/* border: 1px solid red; */

}
.divider-gal>img {
	width:100%;
    /* display: block; */
    /* margin: 0 auto; */
}

.divider-gal {
    position: relative;
}


.focus {
    width: 97%;
    display: block;
    margin: auto;
}
.focus>img {
    width: 100%;
}